<script setup>
import {COLOR_THEME_PRIMARY} from "@/utils/config.js"
import {useNavBArStype} from "@/utils/system.js"
const {statusBarheight,titleBarHeight,headHeight}=useNavBArStype();
const props= defineProps({
	title:{
		type:String,
		default:''
	},
	titlecolor:{
		type:String,
		default:'#000'
	}
})

const showBack =getCurrentPages().length>0

const nacBACK=()=>{
	uni.navigateBack({
		fail: ()=> {
			uni.reLaunch({
				url: "/pages/index/index"
			})
		}
	})
}
</script>

<template>
	<view class="container">
		<view class="sapntop"></view>
		<view class="appbar">
			<!-- 返回图标 -->
			<view class="image" v-if="showBack" @click.stop="nacBACK">
				<uni-icons type="left" size="25" :color="titlecolor"></uni-icons>
			</view>
			<view class="title">
				{{title}}
			</view>
			<!-- 展位 -->
			<view class="span"></view>
		</view>
		
	</view>
</template>

<style lang="scss" scoped>
	.container{
		height: v-bind(headHeight);
		width: 100%;
		position: absolute;
		top:0;
		left: 0;
	}
	.sapntop{
		width: 100%;
		
		background-color: #fafafa;
		height: v-bind(statusBarheight);
	}
	.appbar{
		background-color:v-bind(COLOR_THEME_PRIMARY) ;
		display: flex;
		flex-direction: row;
		width: 100%;
		height: v-bind(titleBarHeight);
		align-items: center;
		justify-content: space-between;
		text-align: center;
		.title{
			height: 100%;
			display: flex;
			flex-direction: column;
			text-align: center;
			justify-content: center;
			color: v-bind(titlecolor);
		}
		.image{
			width: 50rpx;
		}
		.span{
			width: 50rpx;
		}
	}
</style>